import React, { useState, useEffect } from 'react';
import { Card, Tabs, List, Avatar, Switch, Button, Tag, Tooltip, Space, Badge, Input, Divider, Typography, Modal, Form, notification } from 'antd';
import { 
  SearchOutlined, 
  SettingOutlined, 
  StarOutlined, 
  StarFilled, 
  ApiOutlined,
  ReloadOutlined,
  BugOutlined,
  ToolOutlined
} from '@ant-design/icons';
import { useModelsStore, Model } from '../../stores/modelsStore';
import ModelConfigDrawer from './ModelConfigDrawer';

const { Title, Text } = Typography;
const { TabPane } = Tabs;

const ModelSwitchPanel: React.FC = () => {
  // 状态变量
  const [searchText, setSearchText] = useState('');
  const [showConfigDrawer, setShowConfigDrawer] = useState(false);
  const [currentModel, setCurrentModel] = useState<Model | null>(null);
  const [activeModels, setActiveModels] = useState<string[]>([]);
  const [isOllamaModalVisible, setIsOllamaModalVisible] = useState(false);
  const [isDebugMode, setIsDebugMode] = useState(false);
  const [form] = Form.useForm();

  // 从store获取模型数据
  const { 
    llmModels, 
    embeddingModels, 
    activeLlm, 
    activeEmbedding,
    setActiveLlm, 
    setActiveEmbedding,
    toggleFavorite,
    refreshModels,
    fetchModels,
    models,
    loading
  } = useModelsStore();
  
  // 初始化加载模型
  useEffect(() => {
    fetchModels();
  }, [fetchModels]);

  // 监听模型数据变化，更新激活的模型列表
  useEffect(() => {
    const activeModelIds = models
      .filter(model => model.isActive)
      .map(model => model.id);
    setActiveModels(activeModelIds);
    console.log('模型数据更新，当前激活的模型:', activeModelIds, '总模型数:', models.length);
    
    // 如果模型数据变化，强制重新渲染组件
    if (models.length > 0) {
      // 这里使用一个临时状态变化来触发重新渲染
      setSearchText(prev => {
        setTimeout(() => setSearchText(prev), 50);
        return '';
      });
    }
  }, [models]);

  // 模型刷新事件监听器
  useEffect(() => {
    const handleModelsRefreshStart = () => {
      console.log('开始刷新模型列表');
    };

    const handleModelsRefreshComplete = (event: CustomEvent) => {
      console.log('模型列表刷新完成', event.detail);
      // 更新激活的模型列表
      const activeModelIds = models
        .filter(model => model.isActive)
        .map(model => model.id);
      setActiveModels(activeModelIds);
    };

    // 添加事件监听器
    document.addEventListener('models-refresh-start', handleModelsRefreshStart as EventListener);
    document.addEventListener('models-refresh-complete', handleModelsRefreshComplete as EventListener);

    // 组件卸载时移除事件监听器
    return () => {
      document.removeEventListener('models-refresh-start', handleModelsRefreshStart as EventListener);
      document.removeEventListener('models-refresh-complete', handleModelsRefreshComplete as EventListener);
    };
  }, [models]);

  // 监听模型类型更新
  useEffect(() => {
    const handleModelsTypeUpdated = (event: CustomEvent) => {
      console.log('模型类型已更新:', event.detail);
      // 强制重新渲染
      setTimeout(() => {
        setSearchText(prev => {
          setTimeout(() => setSearchText(prev), 10);
          return '';
        });
      }, 100);
    };

    // 添加事件监听器
    document.addEventListener('models-type-updated', handleModelsTypeUpdated as EventListener);

    // 组件卸载时移除事件监听器
    return () => {
      document.removeEventListener('models-type-updated', handleModelsTypeUpdated as EventListener);
    };
  }, []);

  // 强制刷新UI - 确保至少执行一次类型重置
  useEffect(() => {
    if (models.length > 0) {
      // 手动分类
      const manualLlmCount = models.filter(m => m.type === 'llm').length;
      const manualEmbCount = models.filter(m => m.type === 'embedding').length;
      console.log(`手动检查模型类型: LLM=${manualLlmCount}, Embedding=${manualEmbCount}`);
      
      // 如果没有正确分类，手动调用一次强制刷新
      if (manualLlmCount === 0 || manualEmbCount === 0) {
        forceRefreshModels();
      }
    }
  }, [models.length > 0]);

  // 确保有正确类型的模型显示（即使store中的getter返回空）
  // 这是一个后备机制，直接从models中筛选
  const allLlmModels = llmModels.length > 0 ? llmModels : models.filter(m => m.type === 'llm');
  const allEmbeddingModels = embeddingModels.length > 0 ? embeddingModels : models.filter(m => m.type === 'embedding');
  
  // 强制将第一个模型设为LLM（如果没有LLM模型）
  useEffect(() => {
    if (models.length > 0 && allLlmModels.length === 0 && allEmbeddingModels.length === 0) {
      console.log('紧急修复: 没有检测到任何类型的模型，强制设置类型...');
      // 直接使用setModels修改模型属性（这是不安全的操作，但是必要的紧急修复）
      const updatedModels = [...models];
      if (updatedModels.length >= 1) {
        updatedModels[0].type = 'llm';
        console.log(`强制将模型 ${updatedModels[0].name} 设为LLM类型`);
      }
      if (updatedModels.length >= 2) {
        updatedModels[1].type = 'embedding';
        console.log(`强制将模型 ${updatedModels[1].name} 设为Embedding类型`);
      }
      
      // 刷新模型
      setTimeout(() => refreshModels(), 500);
    }
  }, [models.length, allLlmModels.length, allEmbeddingModels.length]);

  // 搜索模型
  const filteredLlmModels = allLlmModels.filter(model => 
    model.name.toLowerCase().includes(searchText.toLowerCase())
  );

  const filteredEmbeddingModels = allEmbeddingModels.filter(model => 
    model.name.toLowerCase().includes(searchText.toLowerCase())
  );
  
  // 打印调试信息
  console.log('模型数据状态:', {
    总模型数: models.length,
    LLM模型数: llmModels.length,
    嵌入模型数: embeddingModels.length,
    过滤后LLM模型数: filteredLlmModels.length,
    过滤后嵌入模型数: filteredEmbeddingModels.length,
    当前激活模型IDs: activeModels,
    搜索文本: searchText,
    加载状态: loading
  });
  
  // 确保模型列表至少显示加载指示器
  useEffect(() => {
    // 强制重新渲染列表
    if (models.length > 0) {
      console.log('模型数据已更新，触发UI重新渲染');
      const tempSearchText = searchText;
      setSearchText(''); // 临时清空搜索条件
      setTimeout(() => {
        setSearchText(tempSearchText); // 恢复搜索条件
      }, 50);
    }
  }, [models.length]);

  // 手动刷新模型列表
  const handleRefreshModels = async () => {
    try {
      notification.info({
        message: '刷新模型列表',
        description: '正在获取最新的模型信息...',
        duration: 2
      });
      
      // 检查是否已配置Ollama服务器
      const ollamaServer = localStorage.getItem('ollamaServer');
      if (ollamaServer) {
        console.log('尝试连接Ollama服务器:', ollamaServer);
        
        // 测试Ollama服务器连接
        try {
          const testResponse = await fetch(`${ollamaServer}/api/version`, {
            method: 'GET',
            headers: {
              'Accept': 'application/json',
            },
            cache: 'no-store'
          });
          
          if (testResponse.ok) {
            const versionData = await testResponse.json();
            console.log('Ollama服务器连接成功, 版本:', versionData.version);
            
            // 尝试获取模型列表
            try {
              console.log('尝试获取Ollama模型列表...');
              const tagsResponse = await fetch(`${ollamaServer}/api/tags`, {
                method: 'GET',
                headers: {
                  'Accept': 'application/json',
                },
                cache: 'no-store'
              });
              
              console.log('Ollama API响应状态:', tagsResponse.status, tagsResponse.statusText);
              
              if (tagsResponse.ok) {
                const tagsData = await tagsResponse.json();
                console.log('获取到Ollama模型数据:', tagsData);
                
                if (tagsData.models && Array.isArray(tagsData.models)) {
                  console.log(`成功获取到${tagsData.models.length}个Ollama模型`);
                  if (tagsData.models.length > 0) {
                    // 显示模型数量通知
                    notification.success({
                      message: '发现Ollama模型',
                      description: `在Ollama服务器上找到${tagsData.models.length}个模型`,
                      duration: 3
                    });
                  } else {
                    notification.warning({
                      message: '未发现Ollama模型',
                      description: '服务器连接成功，但未找到已安装的模型。您可能需要先安装模型。',
                      duration: 4
                    });
                  }
                } else {
                  console.warn('Ollama API返回格式不符合预期:', tagsData);
                  notification.warning({
                    message: 'Ollama模型数据异常',
                    description: 'API返回的数据格式不符合预期，请检查Ollama服务器。',
                    duration: 4
                  });
                }
              } else {
                throw new Error(`获取模型列表失败: ${tagsResponse.status} ${tagsResponse.statusText}`);
              }
            } catch (tagsError) {
              console.error('获取模型列表失败:', tagsError);
              notification.error({
                message: '获取Ollama模型失败',
                description: tagsError instanceof Error ? tagsError.message : '无法从Ollama服务器获取模型列表',
                duration: 4
              });
            }
          } else {
            throw new Error(`Ollama服务器连接失败: ${testResponse.status} ${testResponse.statusText}`);
          }
        } catch (error) {
          console.error('Ollama服务器连接测试失败:', error);
          notification.error({
            message: 'Ollama服务器连接失败',
            description: error instanceof Error ? error.message : '无法连接到Ollama服务器',
            duration: 4
          });
        }
    } else {
        console.log('未配置Ollama服务器，跳过获取Ollama模型');
      }
      
      // 无论上面的操作成功与否，都刷新模型列表
      console.log('开始刷新模型列表...');
      await refreshModels();
      
      // 刷新完成后检查模型数量
      const totalModels = models.length;
      const ollamaModelCount = models.filter(m => m.provider === 'Ollama').length;
      
      console.log(`模型列表刷新完成。总计${totalModels}个模型，其中Ollama模型${ollamaModelCount}个`);
      
      notification.success({
        message: '模型列表已更新',
        description: `成功获取最新的模型信息，共${totalModels}个模型${ollamaModelCount > 0 ? `（包含${ollamaModelCount}个Ollama模型）` : ''}`,
        duration: 3
      });
    } catch (error) {
      console.error('刷新模型失败:', error);
      notification.error({
        message: '刷新模型失败',
        description: '无法获取最新的模型信息',
        duration: 3
      });
    }
  };
  
  // 打开模型配置抽屉
  const openConfigDrawer = (model: Model) => {
    setCurrentModel(model);
    setShowConfigDrawer(true);
  };
  
  // 关闭模型配置抽屉
  const handleConfigDrawerClose = () => {
    setShowConfigDrawer(false);
    setCurrentModel(null);
  };

  // 切换模型激活状态
  const handleModelToggle = (checked: boolean, model: Model) => {
    console.log(`切换模型 ${model.name} (${model.type}) 状态: ${checked ? '启用' : '禁用'}`);
    
    if (checked) {
      // 启用模型
      if (model.type === 'llm') {
        setActiveLlm(model.id);
        // 立即更新当前模型的激活状态
        model.isActive = true;
        notification.success({
          message: '语言模型已启用',
          description: `已将 ${model.name} 设为当前使用的语言模型`,
          duration: 2
        });
      } else if (model.type === 'embedding') {
        setActiveEmbedding(model.id);
        // 立即更新当前模型的激活状态
        model.isActive = true;
        notification.success({
          message: '嵌入模型已启用',
          description: `已将 ${model.name} 设为当前使用的嵌入模型`,
          duration: 2
        });
      }
      
      // 立即更新其他同类型模型为非激活状态
      models.forEach(m => {
        if (m.id !== model.id && m.type === model.type) {
          m.isActive = false;
        }
      });
      
      // 强制重新渲染
      setSearchText(prev => {
        setTimeout(() => setSearchText(prev), 10);
        return prev;
      });
    } else {
      // 禁用模型时，确保至少还有一个同类型的模型保持启用状态
      if (model.type === 'llm') {
        // 查找其他LLM模型
        const otherLlmModels = models.filter(m => 
          m.type === 'llm' && m.id !== model.id
        );
        
        if (otherLlmModels.length === 0) {
          // 如果没有其他LLM模型，不允许禁用当前模型
          notification.warning({
            message: '操作被阻止',
            description: '必须至少有一个启用的语言模型',
            duration: 3
          });
          
          // 刷新模型列表以重置UI状态
          setTimeout(() => refreshModels(), 100);
        } else {
          // 如果有其他LLM模型，自动激活第一个
          const newActiveLlm = otherLlmModels[0];
          setActiveLlm(newActiveLlm.id);
          
          // 立即更新激活状态
          model.isActive = false;
          newActiveLlm.isActive = true;
          
          notification.info({
            message: '语言模型已切换',
            description: `已自动切换到 ${newActiveLlm.name}`,
            duration: 2
          });
          
          // 强制重新渲染
          setSearchText(prev => {
            setTimeout(() => setSearchText(prev), 10);
            return prev;
          });
        }
      } else if (model.type === 'embedding') {
        // 查找其他嵌入模型
        const otherEmbeddingModels = models.filter(m => 
          m.type === 'embedding' && m.id !== model.id
        );
        
        if (otherEmbeddingModels.length === 0) {
          // 如果没有其他嵌入模型，不允许禁用当前模型
          notification.warning({
            message: '操作被阻止',
            description: '必须至少有一个启用的嵌入模型',
            duration: 3
          });
          
          // 刷新模型列表以重置UI状态
          setTimeout(() => refreshModels(), 100);
        } else {
          // 如果有其他嵌入模型，自动激活第一个
          const newActiveEmbedding = otherEmbeddingModels[0];
          setActiveEmbedding(newActiveEmbedding.id);
          
          // 立即更新激活状态
          model.isActive = false;
          newActiveEmbedding.isActive = true;
          
          notification.info({
            message: '嵌入模型已切换',
            description: `已自动切换到 ${newActiveEmbedding.name}`,
            duration: 2
          });
          
          // 强制重新渲染
          setSearchText(prev => {
            setTimeout(() => setSearchText(prev), 10);
            return prev;
          });
        }
      }
    }
    
    // 更新"当前已启用的模型"显示
    setTimeout(() => {
      const activeModelIds = models
        .filter(model => model.isActive)
        .map(model => model.id);
      setActiveModels(activeModelIds);
      console.log('更新当前已启用的模型:', activeModelIds);
    }, 300);
  };

  // 切换模型收藏状态
  const handleFavoriteToggle = (model: Model) => {
    toggleFavorite(model.id, model.type);
  };

  // 打开Ollama配置模态框
  const openOllamaConfig = () => {
    form.setFieldsValue({
      serverUrl: localStorage.getItem('ollamaServer') || 'http://localhost:11434'
    });
    setIsOllamaModalVisible(true);
  };
  
  // 保存Ollama配置
  const saveOllamaConfig = async (values: { serverUrl: string }) => {
    try {
      const { serverUrl } = values;
      
      // 测试连接
      console.log('测试Ollama服务器连接:', serverUrl);
      const testResponse = await fetch(`${serverUrl}/api/version`, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
        },
        cache: 'no-store'
      });
      
      if (!testResponse.ok) {
        throw new Error(`连接测试失败: ${testResponse.status} ${testResponse.statusText}`);
      }
      
      const versionData = await testResponse.json();
      console.log('Ollama服务器版本:', versionData.version);
      
      // 保存配置
      localStorage.setItem('ollamaServer', serverUrl);
      setIsOllamaModalVisible(false);
      
      notification.success({
        message: 'Ollama配置已保存',
        description: `成功连接到Ollama服务器 (版本: ${versionData.version})`,
        duration: 3
      });
      
      // 测试获取模型列表
      console.log('尝试获取Ollama模型列表...');
      try {
        const modelsResponse = await fetch(`${serverUrl}/api/tags`, {
          method: 'GET',
          headers: {
            'Accept': 'application/json',
          },
          cache: 'no-store'
        });
        
        console.log('Ollama API响应状态:', modelsResponse.status, modelsResponse.statusText);
        
        if (!modelsResponse.ok) {
          throw new Error(`无法获取模型列表: ${modelsResponse.status} ${modelsResponse.statusText}`);
        }
        
        const modelsData = await modelsResponse.json();
        console.log('获取到Ollama模型数据:', modelsData);
        
        if (modelsData.models && Array.isArray(modelsData.models) && modelsData.models.length > 0) {
          // 显示模型数量
          notification.info({
            message: '发现Ollama模型',
            description: `在Ollama服务器上找到${modelsData.models.length}个模型`,
            duration: 3
          });
        } else {
          notification.warning({
            message: '未发现Ollama模型',
            description: '服务器连接成功，但未找到已安装的模型。您可能需要先安装模型，或在Ollama服务器上执行命令如: ollama pull llama2',
            duration: 5
          });
        }
      } catch (error) {
        console.error('获取模型列表失败:', error);
        notification.warning({
          message: '获取模型列表失败',
          description: error instanceof Error ? error.message : '无法从Ollama服务器获取模型列表',
          duration: 4
        });
      }
      
      // 无论上面的步骤成功与否，都尝试刷新模型列表
      // 使用setTimeout确保处理完当前操作后再刷新
      notification.info({
        message: '刷新模型列表',
        description: '正在更新模型数据，请稍候...',
        duration: 2
      });
      
      setTimeout(async () => {
        console.log('刷新模型列表...');
        try {
          await fetchModels();
          
          // 检查是否有Ollama模型被添加
          const ollamaModelCount = models.filter(m => m.provider === 'Ollama').length;
          console.log(`刷新完成，现有Ollama模型数量: ${ollamaModelCount}`);
          
          if (ollamaModelCount > 0) {
            notification.success({
              message: '模型列表已更新',
              description: `成功加载${ollamaModelCount}个Ollama模型`,
              duration: 3
            });
          } else {
            notification.warning({
              message: '未找到Ollama模型',
              description: '未能加载任何Ollama模型，请确保您已经在Ollama服务器上安装了模型',
              duration: 4
            });
          }
        } catch (refreshError) {
          console.error('刷新模型失败:', refreshError);
          notification.error({
            message: '刷新模型失败',
            description: '无法更新模型列表，请稍后再试',
            duration: 3
          });
        }
      }, 500);
    } catch (error) {
      console.error('Ollama配置测试失败:', error);
      notification.error({
        message: 'Ollama配置测试失败',
        description: error instanceof Error ? error.message : '无法连接到指定的Ollama服务器',
        duration: 5
      });
    }
  };

  // 强制刷新所有模型
  const forceRefreshModels = async () => {
    // 显示加载通知
    notification.info({
      message: '强制刷新模型',
      description: '正在重置模型类型并重新加载...',
      duration: 2
    });

    try {
      // 获取所有模型
      if (models.length > 0) {
        // 手动分配类型
        const updatedModels = [...models];
        
        // 先尝试使用名称识别
        updatedModels.forEach(model => {
          const modelName = model.name.toLowerCase();
          if (modelName.includes('embed') || 
              modelName.includes('text-') || 
              modelName.includes('vector') || 
              modelName.includes('embedding')) {
            model.type = 'embedding';
            console.log(`通过名称识别: ${model.name} => embedding`);
          } else {
            model.type = 'llm';
            console.log(`通过名称识别: ${model.name} => llm`);
          }
        });
        
        // 确保至少有一个每种类型
        const hasLlm = updatedModels.some(m => m.type === 'llm');
        const hasEmbedding = updatedModels.some(m => m.type === 'embedding');
        
        if (!hasLlm && updatedModels.length > 0) {
          updatedModels[0].type = 'llm';
          console.log(`强制设置: ${updatedModels[0].name} => llm`);
        }
        
        if (!hasEmbedding) {
          // 如果有多个模型，将第二个设为embedding
          if (updatedModels.length > 1) {
            updatedModels[1].type = 'embedding';
            console.log(`强制设置: ${updatedModels[1].name} => embedding`);
          } 
          // 如果只有一个模型，创建一个副本作为embedding
          else if (updatedModels.length === 1) {
            const embedCopy = {...updatedModels[0]};
            embedCopy.id = `${embedCopy.id}-embedding`;
            embedCopy.name = `${embedCopy.name} (Embedding)`;
            embedCopy.type = 'embedding';
            updatedModels.push(embedCopy);
            console.log(`创建嵌入模型副本: ${embedCopy.name}`);
          }
        }
      }
    } catch (error) {
      console.error('强制刷新模型失败:', error);
    }
    
    // 调用标准刷新，让store处理更新
    setTimeout(() => {
      refreshModels();
      
      // 显示成功通知
      notification.success({
        message: '模型类型重置成功',
        description: '所有模型已重新分类',
        duration: 3
      });
    }, 500);
  };

  // 渲染模型卡片
  const renderModelCard = (model: Model) => {
    const isActive = model.isActive;
    
    return (
      <List.Item>
        <Card 
          size="small" 
          style={{ 
            width: '100%', 
            borderLeft: isActive ? '3px solid #1890ff' : undefined,
            backgroundColor: isActive ? '#f0f7ff' : undefined
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Avatar 
                shape="square" 
                style={{ 
                  backgroundColor: getAvatarColorByProvider(model.provider),
                  marginRight: 12
                }}
              >
                {model.provider.charAt(0)}
              </Avatar>
              <div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Text strong>{model.name}</Text>
                  {model.isNew && <Badge count="New" style={{ backgroundColor: '#52c41a', marginLeft: 8 }} />}
                </div>
                <div>
                  <Text type="secondary" style={{ fontSize: 12 }}>{model.provider}</Text>
                  {model.modelSize && (
                    <Tag color="blue" style={{ marginLeft: 8, fontSize: 11 }}>{model.modelSize}</Tag>
                  )}
                  {model.multimodal && (
                    <Tag color="purple" style={{ fontSize: 11 }}>多模态</Tag>
                  )}
                  {isDebugMode && (
                    <Tag color="orange" style={{ fontSize: 11 }}>ID: {model.id.substring(0, 12)}</Tag>
                  )}
                </div>
              </div>
            </div>
            <Space>
              {isDebugMode && (
                <Button
                  size="small"
                  onClick={() => console.log('模型详情:', model)}
                  title="在控制台打印模型详情"
                >
                  调试
                </Button>
              )}
              <Tooltip title={model.isFavorite ? "取消收藏" : "添加收藏"}>
                <Button 
                  type="text" 
                  icon={model.isFavorite ? <StarFilled style={{ color: '#faad14' }} /> : <StarOutlined />} 
                  onClick={() => handleFavoriteToggle(model)}
                />
              </Tooltip>
              <Tooltip title="配置模型参数">
                <Button 
                  type="text"
                  icon={<SettingOutlined />} 
                  onClick={() => openConfigDrawer(model)}
                />
              </Tooltip>
              <Switch 
                checked={isActive} 
                onChange={(checked) => handleModelToggle(checked, model)}
              />
            </Space>
          </div>
          <Divider style={{ margin: '8px 0' }} />
          <Text type="secondary" style={{ fontSize: 12 }}>{model.description}</Text>
          <div style={{ marginTop: 8 }}>
            {model.tags.map((tag: string) => (
              <Tag key={tag} style={{ fontSize: 11, marginBottom: 4 }}>{tag}</Tag>
            ))}
            {isDebugMode && (
              <Tag color="red" style={{ fontSize: 11, marginBottom: 4 }}>类型: {model.type}</Tag>
            )}
          </div>
          <div>
            <Text type="secondary" style={{ fontSize: 12 }}>{model.provider}</Text>
            {model.modelSize && (
              <Tag color="blue" style={{ marginLeft: 8, fontSize: 11 }}>{model.modelSize}</Tag>
            )}
            {model.multimodal && (
              <Tag color="purple" style={{ fontSize: 11 }}>多模态</Tag>
            )}
            {/* 添加模型类型标签，总是显示 */}
            <Tag color={model.type === 'llm' ? 'green' : 'orange'} style={{ fontSize: 11 }}>
              {model.type === 'llm' ? 'LLM' : 'Embedding'}
            </Tag>
            {isDebugMode && (
              <Tag color="volcano" style={{ fontSize: 11 }}>ID: {model.id.substring(0, 12)}</Tag>
            )}
          </div>
        </Card>
          </List.Item>
    );
  };

    return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '16px 16px 0' }}>
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Title level={4} style={{ margin: 0 }}>模型中心</Title>
                  <Space>
              <Tooltip title="开启/关闭调试模式">
                <Button
                  type={isDebugMode ? "primary" : "default"}
                  icon={<BugOutlined />}
                  onClick={() => setIsDebugMode(!isDebugMode)}
                />
              </Tooltip>
              <Tooltip title="刷新模型列表">
                <Button 
                  icon={<ReloadOutlined />} 
                  onClick={handleRefreshModels}
                  loading={loading}
                />
              </Tooltip>
              <Tooltip title="强制重置模型状态">
                <Button 
                  icon={<ToolOutlined />} 
                  danger
                  onClick={forceRefreshModels}
                >
                  强制刷新
                </Button>
              </Tooltip>
              <Tooltip title="配置Ollama服务器">
                <Button 
                  type="primary"
                  icon={<ApiOutlined />} 
                  onClick={openOllamaConfig}
                >
                  Ollama配置
                </Button>
              </Tooltip>
              <Tooltip title="如果模型不显示，点击此按钮重新加载页面">
                <Button 
                  type="default" 
                  onClick={() => window.location.reload()}
                >
                  重新加载页面
                </Button>
              </Tooltip>
            </Space>
          </div>
          <Input 
            placeholder="搜索模型..." 
            prefix={<SearchOutlined />} 
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            allowClear
          />
          
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Text strong>当前已启用的模型:</Text>
            <div>
              {activeModels.length > 0 ? (
                models
                  .filter(model => model.isActive)
                  .map(model => (
                    <Tag key={model.id} color={model.type === 'llm' ? 'blue' : 'green'}>
                      {model.name} ({model.type === 'llm' ? '语言模型' : '嵌入模型'})
                    </Tag>
                  ))
              ) : (
                <Text type="warning">未选择任何模型</Text>
              )}
            </div>
          </div>
                  </Space>
                </div>
      
      <Tabs defaultActiveKey="llm" style={{ flex: 1, padding: '0 16px 16px' }}>
        <TabPane tab={`语言模型 (${allLlmModels.length})`} key="llm">
          <div style={{ height: 'calc(100vh - 280px)', overflowY: 'auto', padding: '8px 0' }}>
            {loading ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{ marginBottom: 16 }}>加载模型中...</div>
              </div>
            ) : allLlmModels.length > 0 ? (
              <List
                grid={{ gutter: 16, column: 1 }}
                dataSource={allLlmModels} // 使用我们的后备数据源
                renderItem={renderModelCard}
                rowKey={item => item.id}
              />
            ) : (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <Text type="secondary">没有找到语言模型</Text>
                <div style={{ marginTop: 16 }}>
                  <div>模型总数: {models.length}, 但LLM模型数量为0</div>
                  <Button type="primary" onClick={handleRefreshModels} style={{ marginTop: 8 }}>
                    刷新模型列表
                  </Button>
                  <Button style={{ marginTop: 8, marginLeft: 8 }} onClick={() => window.location.reload()}>
                    重新加载页面
                  </Button>
                  <div style={{ marginTop: 8 }}>
                    <Button type="dashed" onClick={forceRefreshModels}>
                      强制重置模型类型
                    </Button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </TabPane>
        <TabPane tab={`嵌入模型 (${allEmbeddingModels.length})`} key="embedding">
          <div style={{ height: 'calc(100vh - 280px)', overflowY: 'auto', padding: '8px 0' }}>
            {loading ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{ marginBottom: 16 }}>加载模型中...</div>
              </div>
            ) : allEmbeddingModels.length > 0 ? (
              <List
                grid={{ gutter: 16, column: 1 }}
                dataSource={allEmbeddingModels} // 使用我们的后备数据源
                renderItem={renderModelCard}
                rowKey={item => item.id}
              />
            ) : (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <Text type="secondary">没有找到嵌入模型</Text>
                <div style={{ marginTop: 16 }}>
                  <div>模型总数: {models.length}, 但嵌入模型数量为0</div>
                  <Button type="primary" onClick={handleRefreshModels} style={{ marginTop: 8 }}>
                    刷新模型列表
                  </Button>
                  <Button style={{ marginTop: 8, marginLeft: 8 }} onClick={() => window.location.reload()}>
                    重新加载页面
                  </Button>
                  <div style={{ marginTop: 8 }}>
                    <Button type="dashed" onClick={forceRefreshModels}>
                      强制重置模型类型
                    </Button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </TabPane>
        
        {/* 添加一个额外的标签页显示所有模型，不管类型 */}
        <TabPane tab={`所有模型 (${models.length})`} key="all">
          <div style={{ height: 'calc(100vh - 280px)', overflowY: 'auto', padding: '8px 0' }}>
            {loading ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{ marginBottom: 16 }}>加载模型中...</div>
              </div>
            ) : models.length > 0 ? (
              <>
                <div style={{ padding: '8px 0', marginBottom: 16 }}>
                  <Text>以下是所有加载的模型（包括Ollama模型）</Text>
                </div>
                <List
                  grid={{ gutter: 16, column: 1 }}
                  dataSource={models}
                  renderItem={renderModelCard}
                  rowKey={item => item.id}
                />
              </>
            ) : (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <Text type="secondary">没有找到任何模型</Text>
                <div style={{ marginTop: 16 }}>
                  <Button type="primary" onClick={handleRefreshModels} style={{ marginTop: 8 }}>
                    刷新模型列表
                  </Button>
                  <Button style={{ marginTop: 8, marginLeft: 8 }} onClick={() => window.location.reload()}>
                    重新加载页面
                  </Button>
                </div>
              </div>
            )}
            </div>
          </TabPane>
        </Tabs>
      
      {/* 模型配置抽屉 */}
      {currentModel && (
      <ModelConfigDrawer 
        visible={showConfigDrawer}
        model={currentModel}
          onClose={handleConfigDrawerClose}
      />
      )}
      
      {/* Ollama配置模态框 */}
      <Modal
        title="Ollama服务器配置"
        open={isOllamaModalVisible}
        onCancel={() => setIsOllamaModalVisible(false)}
        footer={null}
      >
          <Form
          form={form}
            layout="vertical"
          onFinish={saveOllamaConfig}
          initialValues={{
            serverUrl: localStorage.getItem('ollamaServer') || 'http://localhost:11434'
          }}
          >
            <Form.Item
              name="serverUrl"
            label="Ollama服务器URL"
            rules={[
              { required: true, message: '请输入Ollama服务器URL' },
              { type: 'url', message: '请输入有效的URL地址' }
            ]}
            extra="默认为 http://localhost:11434，如果Ollama运行在其他地址，请修改"
            >
              <Input placeholder="http://localhost:11434" />
            </Form.Item>
          
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                测试并保存
              </Button>
              <Button onClick={() => setIsOllamaModalVisible(false)}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

// 根据提供商获取头像颜色
const getAvatarColorByProvider = (provider: string) => {
  const providerColors: Record<string, string> = {
    'OpenAI': '#10a37f',
    'Anthropic': '#d09a66',
    'Ollama': '#ff6b6b',
    'HuggingFace': '#ffd166',
    'BAAI': '#06d6a0',
    'Nomic AI': '#118ab2',
    'Google': '#4285f4',
    'Cohere': '#5d53c9',
    'LMStudio': '#6366f1'
  };
  
  return providerColors[provider] || '#1890ff';
};

export default ModelSwitchPanel; 